<template>
  <div style="margin: 20px">
    <el-form autoComplete="on" :model="changeForm" :rules="changeRules" ref="changeForm" label-position="left" label-width="100px" class="card-box change_Form">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input name="oldPassword" type="password" v-model="changeForm.oldPassword" autoComplete="on" placeholder="旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input name="newPassword" type="password" v-model="changeForm.newPassword" autoComplete="on" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="againPassword">
        <el-input name="againPassword" type="password" v-model="changeForm.againPassword" autoComplete="on" placeholder="确认新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click.native.prevent="handleChange">
          确定
        </el-button>
        <el-button @click="resetForm('changeForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
import { updatePwd } from '@/api/sys/changePwd'
export default {
  name: 'changpwd',
  directives: {
    waves
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      changeForm: {
        oldPassword: '',
        newPassword: '',
        againPassword: ''
      },
      changeRules: {
        oldPassword: [{ required: true, trigger: 'blur', validator: validatePass }],
        newPassword: [{ required: true, trigger: 'blur', validator: validatePass }],
        againPassword: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false
    }
  },
  methods: {
    handleChange() {
      this.$refs.changeForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.changeForm.oldPassword === this.changeForm.againPassword) {
            this.loading = false
            this.$message.error('新密码和旧密码相同')
            return false
          }
          // 判断两次输入密码是否一致
          if (this.changeForm.newPassword !== this.changeForm.againPassword) {
            this.loading = false
            this.$message.error('两次输入的新密码不一致')
            return false
          }
          const param = {}
          param.newPassword = this.changeForm.newPassword
          param.oldPassword = this.changeForm.oldPassword
          param.accountId = this.$store.getters.accountId
          // 更新密码
          updatePwd(param).then(response => {
            if (response.code === 0) {
              this.loading = false
              this.resetForm('changeForm')
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
              this.$store.dispatch('LogOut').then(() => {
                location.reload()  // 为了重新实例化vue-router对象 避免bug
              })
            } else {
              this.loading = false
              this.$notify({
                title: '失败',
                message: response.message,
                type: 'fail',
                duration: 2000
              })
            }
          })

          // 判断输入的原密码是否正确
//          examinPassword(this.changeForm.oldPassword).then(response => {
//            const result = response.data
//            if (result.code === 0) {
//              updatePwd(this.changeForm.newPassword).then(response => {
//                if (response.code === 0) {
//                  this.loading = false
//                  this.resetForm('changeForm')
//                  this.$notify({
//                    title: '成功',
//                    message: '修改成功',
//                    type: 'success',
//                    duration: 2000
//                  })
//                  this.$store.dispatch('LogOut').then(() => {
//                    location.reload()  // 为了重新实例化vue-router对象 避免bug
//                  })
//                } else {
//                  this.loading = false
//                  this.$notify({
//                    title: '失败',
//                    message: result.message,
//                    type: 'fail',
//                    duration: 2000
//                  })
//                }
//              })
//            }
//          }).catch(e => {
//            this.changeForm.oldPassword = ''
//            this.loading = false
//            return false
//          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.el-input {
  display: inline-block;
  height: 47px;
  width: 85%;
}
.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}
.change_Form {
  position: absolute;
  left: 0;
  right: 0;
  width: 450px;
  padding: 35px 35px 25px 35px;
}

.el-form-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #454545;
}

.thirdparty-button {
  position: absolute;
  right: 35px;
  bottom: 28px;
}
</style>
